class Time {
  constructor() {
    // judge only create one
    if (!document.querySelector('.ka-time')) {
      let initName = document.createElement('div')
      initName.classList.add('ka-time')
      document.body.appendChild(initName)
      this.id = document.querySelector('.ka-time')
      this.inputElement = ''
      let date = new Date()
      this.time = date.getDate()
      this.init(date.getFullYear(), date.getMonth() + 1, date.getDate())
      this.show()
    }
  }
  // shows calendar
  show() {
    let timeALl = document.querySelectorAll('input[name="ka-time"]')
    let kaTime = document.querySelector('.ka-time')
    for (let x = 0; x < timeALl.length; x++) {
      timeALl[x].onfocus = (e) => {

        kaTime.style.display = 'block'
        kaTime.style.top = e.target.offsetTop + e.target.clientHeight + 10 + 'px'
        kaTime.style.left = e.target.offsetLeft + 'px'
        this.inputElement = e.target
      }
    }
  }

  // return  .chooseYear .chooseMonth .today
  init(propYear, propMonth, propDate) {
    let firstLine = document.createElement('div')
    firstLine.classList.add('ka-time-first')
    let towAngleBracket = document.createElement('div')
    towAngleBracket.classList.add('angle-bracket')
    towAngleBracket.classList.add('year')
    let month = document.createElement('div')
    month.classList.add('angle-bracket')
    month.classList.add('month')

    let firstTimeYear = document.createElement('p')
    firstTimeYear.classList.add('chooseYear')
    let firstTimeMonth = document.createElement('p')
    firstTimeMonth.classList.add('chooseMonth')

    let date = new Date()
    // props year and month 
    firstTimeYear.appendChild(document.createTextNode(propYear + '年'))
    firstTimeMonth.appendChild(document.createTextNode(propMonth + '月'))

    let NextAngleBracket = document.createElement('div')
    NextAngleBracket.classList.add('next')
    NextAngleBracket.classList.add('next-year')
    let nextMonth = document.createElement('div')
    nextMonth.classList.add('next')
    nextMonth.classList.add('next-month')

    firstLine.appendChild(towAngleBracket)
    firstLine.appendChild(month)
    firstLine.appendChild(firstTimeYear)
    firstLine.appendChild(firstTimeMonth)
    firstLine.appendChild(nextMonth)
    firstLine.appendChild(NextAngleBracket)

    // seconde 
    let week = ['日', '一', '二', '三', '四', '五', '六']
    let secondWeek = document.createElement('div')
    secondWeek.classList.add('week')
    for (let x in week) {
      let weekSpan = document.createElement('span')
      let weekText = document.createTextNode(week[x])
      weekSpan.appendChild(weekText)
      secondWeek.appendChild(weekSpan)
    }

    // third
    let thirdDay = document.createElement('div')
    thirdDay.classList.add('day')

    this.day(propYear, propMonth, propDate, thirdDay)

    // four -- time
    let fourTime = document.createElement('div')
    fourTime.classList.add('time')
    let hourDiv = document.createElement('div')
    hourDiv.classList.add('hour')
    let hourText = document.createTextNode('时')

    let hourElemnt = document.createElement('select')
    const hourAll = 24
    const minute = 60
    for (let x = 0; x < hourAll; x++) {
      let option = document.createElement('option')
      let optionText = document.createTextNode(x)
      option.appendChild(optionText)
      hourElemnt.appendChild(option)
    }
    hourDiv.appendChild(hourElemnt)
    hourDiv.appendChild(hourText)

    // minute
    let minuteDiv = document.createElement('div')
    minuteDiv.classList.add('minute')
    let minuteText = document.createTextNode('分')
    let minuteElemnt = document.createElement('select')
    for (let x = 0; x < minute; x++) {
      let option = document.createElement('option')
      let optionText = document.createTextNode(x)
      option.appendChild(optionText)
      minuteElemnt.appendChild(option)

    }
    minuteDiv.appendChild(minuteElemnt)
    minuteDiv.appendChild(minuteText)

    fourTime.appendChild(hourDiv)
    fourTime.appendChild(minuteDiv)

    //five choose
    let fiveChoose = document.createElement('div')
    fiveChoose.classList.add('choose')
    let buttonArr = ['清空', '现在', '选择']
    for (let x in buttonArr) {
      let buttonElement = document.createElement('button')
      let buttonText = document.createTextNode(buttonArr[x])
      buttonElement.appendChild(buttonText)
      fiveChoose.appendChild(buttonElement)
    }

    this.id.appendChild(firstLine)
    this.id.appendChild(secondWeek)
    this.id.appendChild(thirdDay)
    this.id.appendChild(fourTime)
    this.id.appendChild(fiveChoose)
    // because button not clean so in this
    this.buttonOn()
    this.change()
  }

  day(propYear, propMonth, propDate, id) {

    if (!id) {
      id = document.querySelector('.day')
      id.innerHTML = ''
    }
    // customize calarDate  
    // propMonth - 1 for format new Date() not shows
    let currenDayAll = new Date(propYear, propMonth - 1, 0).getDate()
    let startDay = new Date(propYear, propMonth - 1, 1).getDay()
    let currenDay = propDate
    // console.log(currenDay);
    for (let x = 1; x < currenDayAll + startDay; x++) {
      let daySpan = document.createElement('span')
      if (x <= startDay) {

      }
      else {
        // console.log(x);
        let daySpanText = document.createTextNode(x - startDay)
        daySpan.appendChild(daySpanText)
        if (x - startDay == currenDay) {
          daySpan.classList.add('today')
        }
      }
      id.appendChild(daySpan)
    }
  }

  buttonOn() {
    let chooseYear = document.querySelector('.chooseYear')
    let chooseMonth = document.querySelector('.chooseMonth')
    let buttonAll = document.querySelectorAll('.choose button')
    let chooseHour = document.querySelector('.hour select')
    let chooseMinute = document.querySelector('.minute select')


    let kaTime = document.querySelector('.ka-time')

    for (let x = 0; x < buttonAll.length; x++) {
      buttonAll[x].onclick = (e) => {
        let value = e.target.innerHTML
        let yearStr = chooseYear.innerHTML.replace('年', '-')
        let monthStr = chooseMonth.innerHTML.replace('月', '-')
        let hourStr = chooseHour.selectedIndex > 10 ? chooseHour.selectedIndex : '0' + chooseHour.selectedIndex
        let minuteStr = chooseMinute.selectedIndex > 10 ? chooseMinute.selectedIndex : '0' + chooseMinute.selectedIndex
        let chooseTime = yearStr + monthStr + this.time + ' ' + hourStr + ':' + minuteStr

        switch (value) {
          case '选择':
            event = this.myEvent(chooseTime)
            window.dispatchEvent(event)
            this.inputElement.value = chooseTime
            break;
          case '现在':
            let date = new Date()
            let nowHour = date.getHours() > 10 ? date.getHours() : '0' + date.getHours()
            let nowMinute = date.getMinutes() > 10 ? date.getMinutes() : '0' + date.getMinutes()
            chooseTime = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + nowHour + ':' + nowMinute
            event = this.myEvent(chooseTime)
            window.dispatchEvent(event)
            this.inputElement.value = chooseTime
            break;
          case '清空':
            chooseTime = ''
            event = this.myEvent(chooseTime)
            window.dispatchEvent(event)
            this.inputElement.value = chooseTime
            break;
          default:
            break;
        }
        kaTime.style.display = 'none'
      }

    }
  }

  onEvent(name, fun) {
    window.addEventListener(name, fun)
  }

  myEvent(value) {
    return new CustomEvent('time', {
      detail: value
    })
  }

  change() {
    let dayElement = document.querySelectorAll('.day span')
    let chooseYear = document.querySelector('.chooseYear')
    let chooseMonth = document.querySelector('.chooseMonth')
    let changePrevYear = document.querySelector('.year')
    let changePrevMonth = document.querySelector('.month')
    let changeNextYear = document.querySelector('.next-year')
    let changeNextMonth = document.querySelector('.next-month')
    for (let x = 0; x < dayElement.length; x++) {
      dayElement[x].onclick = (e) => {
        for (let j = 0; j < dayElement.length; j++) {
          dayElement[j].classList.remove('today')
        }
        e.target.classList.add('today')
        this.time = e.target.innerHTML

      }
    }
    changeNextYear.onclick = () => {
      chooseYear.innerHTML = chooseYear.innerHTML.replace('年', '') * 1 + 1 + '年'
      this.day(chooseYear.innerHTML.replace('年', ''), chooseMonth.innerHTML.replace('月', '') - 1, this.time)
      this.change()
    }
    changeNextMonth.onclick = () => {
      chooseMonth.innerHTML = chooseMonth.innerHTML.replace('月', '') * 1 + 1 + '月'
      if (chooseMonth.innerHTML.replace('月', '') * 1 > 12) {
        chooseMonth.innerHTML = 1 + '月'
        chooseYear.innerHTML = chooseYear.innerHTML.replace('年', '') * 1 + 1 + '年'
      }
      this.day(chooseYear.innerHTML.replace('年', ''), chooseMonth.innerHTML.replace('月', '') - 1, this.time)
      this.change()

    }
    changePrevYear.onclick = () => {
      chooseYear.innerHTML = chooseYear.innerHTML.replace('年', '') * 1 - 1 + '年'
      this.day(chooseYear.innerHTML.replace('年', ''), chooseMonth.innerHTML.replace('月', '') - 1, this.time)
      this.change()

    }
    changePrevMonth.onclick = () => {
      chooseMonth.innerHTML = chooseMonth.innerHTML.replace('月', '') * 1 - 1 + '月'
      if (chooseMonth.innerHTML.replace('月', '') * 1 < 1) {
        chooseMonth.innerHTML = 12 + '月'
        chooseYear.innerHTML = chooseYear.innerHTML.replace('年', '') * 1 - 1 + '年'
      }
      this.day(chooseYear.innerHTML.replace('年', ''), chooseMonth.innerHTML.replace('月', '') - 1, this.time)
      this.change()

    }
  }



}